<template>
  <div>
    <div class="g-form form">
      <LiquidityHeader
        title="Remove Liquidity"
        @back="$emit('change', 'home')"
      />
      <!-- <div class="form__label">
        <span>Amount</span>
        <div class="detail">
          <span>Detailed</span>
        </div>
      </div> -->
      <div class="form__percent">
        <div class="label">
          <span>{{ percent }}</span>
          <i>%</i>
        </div>
        <div class="range">
          <input type="range" min="1" max="100" v-model="percent" />
        </div>
        <div class="option">
          <div
            v-for="(option, i) in options"
            :key="i"
            :class="{ on: option === +percent }"
            @click="percent = option"
          >
            <span>{{ option }}%</span>
          </div>
        </div>
      </div>
      <div class="form__arrow">
        <i class="iconfont icon-arrow-down2"></i>
      </div>
      <div class="form__receive">
        <div class="item">
          <span>{{ amountA }}</span>
          <div>
            <span>{{ token0.symbol }}</span>
            <img :src="token0.icon" />
          </div>
        </div>
        <div class="item">
          <span>{{ amountB }}</span>
          <div>
            <span>{{ token1.symbol }}</span>
            <img :src="token1.icon" />
          </div>
        </div>
      </div>
      <div class="form__price">
        <div class="item">
          <span>{{ token0Price }}</span>
          <i>{{ token0.symbol }} per {{ token1.symbol }}</i>
        </div>
        <div class="item end">
          <span>{{ token1Price }}</span>
          <i>{{ token1.symbol }} per {{ token0.symbol }}</i>
        </div>
      </div>
      <div class="form__button">
        <ButtonBase label="Approve" v-if="checkAllowance" @click="approveTo" />
        <ButtonBase label="Remove" v-else @click="isShowConfirm = true" />
      </div>
    </div>
    <LPTokenCard :pair="pair" />
    <NouDialog close-on-click-modal :visible.sync="isShowConfirm">
      <LiquidityConfirm
        :pair="pair"
        :amountA="amountA"
        :amountB="amountB"
        :amountLP="amountLP"
        type="remove"
        @close="isShowConfirm = false"
        @confirm="confirm"
      />
    </NouDialog>
  </div>
</template>

<script>
import SwapField from "@/components/SwapField";
import ButtonBase from "@/components/common/ButtonBase";
import LPTokenCard from "@/components/LPTokenCard";
import LiquidityHeader from "./LiquidityHeader";
import NouDialog from "@/components/common/NouDialog";
import LiquidityConfirm from "@/components/LiquidityConfirm";

import { mapState } from "vuex";
import { getTokenBySymbol } from "@/utils/token";
import { getPairInfo, sendLPApproveTo, removeLiquidity } from "@/init";

import BigNumber from "bignumber.js";

export default {
  components: {
    LiquidityHeader,
    SwapField,
    ButtonBase,
    LPTokenCard,
    NouDialog,
    LiquidityConfirm,
  },
  data() {
    return {
      tokenA: getTokenBySymbol("TSE"),
      tokenB: getTokenBySymbol("BUSD"),
      percent: 25,
      options: [25, 50, 75, 100],
      pair: null,
      isShowConfirm: false,
    };
  },
  computed: {
    ...mapState({
      pairCode: (state) => state.pairCode,
    }),
    token0() {
      return (this.pair && this.pair.token0) || {};
    },
    token1() {
      return (this.pair && this.pair.token1) || {};
    },
    token0Price() {
      return (this.pair && this.pair._token0Price) || {};
    },
    token1Price() {
      return (this.pair && this.pair._token1Price) || {};
    },
    totalSupply() {
      return (this.pair && this.pair.totalSupply) || 0;
    },
    userLiquidity() {
      return (this.pair && this.pair.userLiquidity) || 0;
    },
    userLiquidityPercent() {
      return Math.ceil((this.userLiquidity / this.totalSupply) * 10000) / 100;
    },
    amountA() {
      const amount = (this.pair && this.pair.amountA) || 0;
      return (amount * this.percent) / 100;
    },
    amountB() {
      const amount = (this.pair && this.pair.amountB) || 0;
      return (amount * this.percent) / 100;
    },
    amountLP() {
      const amount = (this.userLiquidity * this.percent) / 100;
      return amount;
    },
    checkAllowance() {
      const allowance = (this.pair && this.pair.allowance) || 0;
      const result = new BigNumber(allowance).comparedTo(this.amountLP) < 0;
      return result;
    },
  },
  mounted() {
    if (this.pairCode) {
      const tokens = this.pairCode.split("/");
      this.tokenA = getTokenBySymbol(tokens[0]);
      this.tokenB = getTokenBySymbol(tokens[1]);
    }
    this.loadPair();
  },
  methods: {
    async loadPair() {
      const pair = await getPairInfo(this.tokenA, this.tokenB);
      this.pair = pair;
    },
    async approveTo() {
      await sendLPApproveTo(pair.liquidityToken.address, "1", 0, 18);
    },
    async confirm() {
      this.isShowConfirm = false;
      await removeLiquidity({
        tokenA: this.tokenA,
        tokenB: this.tokenB,
        remove: this.percent,
        slippage: 5,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.form {
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    span {
      font-size: 16px;
      line-height: 1;
      font-family: "Roboto Bold";
      color: var(--color);
    }

    .g-clickable {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;

      &.back {
        i {
          transform: rotate(90deg);
        }
      }
      &.help {
        border-radius: 14px;
        background-color: rgba(255, 255, 255, 0.03);
      }
      i {
        font-size: 24px;
        color: var(--color);
      }
    }
  }
  &__label {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      font-size: 14px;
      font-family: "Roboto Medium";
      color: var(--color);
    }

    .detail {
      width: 56px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      span {
        color: var(--color-sky-blue);
      }
    }
  }
  &__percent {
    background-color: #000;
    height: 156px;
    border-radius: 20px;
    padding: 0 25px;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .label {
      display: flex;
      align-items: baseline;
      justify-content: flex-start;
      margin-bottom: 10px;

      span {
        font-size: 42px;
        font-family: "Roboto Bold";
        line-height: 1;
        color: var(--color);
      }
      i {
        font-size: 24px;
        font-family: "Roboto Bold";
        line-height: 1;
        margin-left: 3px;
        color: var(--color-content);
      }
    }
    .range {
      margin-bottom: 10px;
      input {
        width: 100%;
        border: none;
      }
    }
    .option {
      display: grid;
      grid-gap: 15px;
      grid-template-columns: 1fr 1fr 1fr 1fr;

      div {
        height: 30px;

        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        border: 3px solid var(--color-grey);
        border-radius: 15px;
        box-sizing: border-box;

        transition: all 0.3s ease;
        &.on {
          background-color: var(--color-grey);
          span {
            background: none;
            color: var(--color);
          }
        }

        span {
          font-size: 12px;
          font-family: "Roboto Medium";
          color: var(--color-content);
          display: inline-block;
        }
      }
    }
  }
  &__arrow {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      font-size: 20px;
    }
  }
  &__receive {
    border-radius: 20px;
    padding: 10px 25px;
    margin-bottom: 20px;
    background-color: #000;
    .item {
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        font-size: 14px;
        font-family: "Roboto Medium";
      }

      div {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        img {
          width: 24px;
          border-radius: 12px;
          margin-left: 5px;
        }
      }
    }
  }
  &__price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;

    .item {
      display: flex;
      align-items: flex-start;
      flex-direction: column;

      &.end {
        align-items: flex-end;
      }

      span {
        font-size: 16px;
        font-family: "Roboto Bold";
        color: var(--color);
        margin-bottom: 10px;
      }

      i {
        font-size: 14px;
        font-family: "Roboto Regular";
        color: var(--color-content);
      }
    }
  }
  &__button {
    display: grid;
    grid-template-columns: 1fr;
  }
}
</style>
